<template>
	<div id="home">
		<div class="title">
			<i></i>{{title}}
		</div>
		<div class="main">
			<div class="in">
				<div class="voice">
					{{voice}}
					<span>{{time}}</span>
				</div>
				<div class="content">
					<ul>
						<li v-for="(v, k, i) in arr">
							<div class="logo">
								<router-link :to="link(k)">
									<img :src="v.logo" :title="v.title">
								</router-link>
							</div>
							<div class="text" v-html="v.content" @mousedown="translate" @dblclick="translate">
	
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="question">
			<div class="in">
				<input type="text" class="input" v-model="content" @keydown.13="send()">
				<span class="btn" @click="send()">发送</span>
			</div>
		</div>
		<div class="interpret" v-show="fanyi.length" @mouseover="fanyi_show" @mouseout="fanyi_hide">
			{{fanyi}}
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			logo1: ``,
			logo2: ``,
			title: '前端狗',
			user: '老辣鸡',
			voice: '神剑如我',
			time: '',
			content: '',
			single: true,
			fanyi: '',
			fanyi_show_time: null,
			arr: [],
			api_host: '//localhost:8089'
		}
	},
	created() {
		console.log('https://github.com/so-diao/fedog')
		let localtime = new Date()
		let time = localtime.getFullYear() + '-' + parseInt(localtime.getMonth() + 1) + '-' + localtime.getDate()
		this.time = time
	},
	mounted() {
		let search = this.$route.params.search
		this.create('在下Fedog，略懂WEB开发。你可以向我提问！')
		if (search) {
			this.content = search
			this.send()
		}

	},
	methods: {
		send() {

			let content = this.content
			if (!this.single || !content) { return }
			this.content = ''

			this.single = false
			this.create(content)
			this.title = '对方正在输入...'

			axios.get(`${this.api_host}?search=${content}`).then(data => {
				let str = data.data

				this.title = '前端狗'
				this.create(str)
				this.single = true
			})

		},
		create(str) {
			let obj = new Object()
			let arr = new Array()
			let num = this.arr.length % 2
			if (num) {
				arr.push(this.logo2)
				arr.push(this.user)
			} else {
				arr.push(this.logo1)
				arr.push(this.title)
			}
			obj.logo = arr[0]
			obj.title = arr[1]
			obj.content = str
			this.arr.push(obj)

			let time = null
			time = setTimeout(() => {
				this.scrollD()
				clearTimeout(time)
			}, 100)

		},
		scrollD() {
			let div = document.querySelector('.main .in')
			div.scrollTop = div.scrollHeight
		},
		link(i) {
			return i % 2 ? 'user' : 'admin'
		},
		translate(e){
			let str = document.selection == undefined ? document.getSelection().toString():document.selection.createRange().text
			let reg= /^[A-Za-z]+$/
			let status = true

			if( str !='' && str.length <= 100 && status && reg.test(trim(str))){
				status = false
				axios.get(`${this.api_host}/fanyi?search=${str}`).then(data => {
					let xy = new Array()
					xy.push(e.clientX)
					xy.push(e.clientY)
					this.fanyi = data.data
					this.fanyi_hide()
					document.querySelector('.interpret').style.cssText=`left:${xy[0]+20}px;top:${xy[1]+20}px;`
					status = true
				})
			}
			function trim(s){
			    return s.replace(/(^\s*)|(\s*$)/g, "")
			}
		},
		fanyi_show(){
			clearTimeout(this.fanyi_show_time)
		},
		fanyi_hide(){
			this.fanyi_show_time =setTimeout(e=>{
				this.fanyi = ''
				clearTimeout(this.fanyi_show_time)
			},1500)
		}
	}
}
</script>
<style scoped>
#home {
	width: 100%;
	height: 100%;
}

#home .title {
	height: 50px;
	line-height: 50px;
	text-align: center;
	border-bottom: 1px solid rgba(30, 35, 42, .06);
	box-shadow: 0 1px 3px 0 rgba(0, 34, 77, .05);
	background: #FFF;
}

#home .main {
	width: 100%;
	height: calc( 100% - 100px);
}

#home .main .in {
	width: calc(100% + 20px);
	height: 100%;
	overflow: scroll;
	overflow-x: hidden;
}

#home .main .voice {
	max-width: 350px;
	min-height: 2em;
	padding: 1em;
	padding-bottom: 1.5em;
	background: #FFF;
	border-radius: 2px;
	box-shadow: 1px 1px 4px rgba(0, 0, 0, .25);
	margin: 30px auto;
	position: relative;
}

#home .main .voice span {
	position: absolute;
	right: 1em;
	bottom: 0.5em;
}

#home .content li {
	display: flex;
	margin: 10px 0;
}

#home .content li:nth-child(2n) {
	flex-direction: row-reverse;
}

#home .content .logo {
	cursor: pointer;
	width: 50px;
	margin: 0 1em;
}

#home .content .logo img {
	width: 100%;
}

#home .content .text {
	padding: 1em;
	border-radius: 5px;
	border: 1px solid #ccc;
	background: #FFF;
	max-width: 60%;
	line-height: 1.5;
	letter-spacing: 2px;
}

#home .question {
	overflow: hidden;
	width: 100%;
	padding: 10px 0;
	border-top: 1px solid rgba(30, 35, 42, .06);
	background: #FFF;
	display: flex;
}

#home .question .in {
	display: inline-block;
	text-align: center;
	margin: 0 auto;
	overflow: hidden;
}

#home .question .input {
	padding-left: 0.5em;
	border: 1px solid #ccc;
	border-radius: 3px;
	width: 350px;
	height: 30px;
	float: left;
	background: #FCFCFC;
}

#home .question .btn {
	padding: 0 8px;
	border-radius: 2px;
	background: #FFF;
	border: 1px solid #ccc;
	cursor: pointer;
	float: left;
	margin-left: 1em;
	height: 30px;
	line-height: 30px;
}

#home .question .btn:hover {
	color: #3C3C3C;
}
.interpret{
	padding: 1em;
	box-shadow: 3px 2px 3px 3px rgba(0,0,0,.05);
	background: rgba(255,255,255,0.9);
	position: fixed;
	left: 100px;
	top: 100px;
}

@media screen and (max-width:500px) {
	#home .question .input {
		width: auto;
	}
	#home .main .voice {
		width: 70%;
	}
	#home .content {
		width: calc(100% - 20px);
	}
}
</style>
<style>

</style>